let productList = localStorage.getItem('PRODUCT') || []
if (typeof productList == 'string') {
    productList = JSON.parse(productList)
}

let checkallState = true
productList.forEach(item => {
    if (item.state == false) {
        checkallState = false
        return
    }
})
let tableEle = document.querySelector('table')
// 动态渲染页面
function loadList() {
    let str = `<tr>
                <th><input type="checkbox" name="checkall" ${checkallState ? 'checked' : ''}>全选</th>
                <th style="display: none;">序号</th>
                <th>图片</th>
                <th>商品信息</th>
                <th>单价</th>
                <th>数量</th>
                <th>金额</th>
                <th>操作</th>
            </tr>`
    productList.forEach(item => {
        let priceAll = (item.price * item.num).toFixed(2)
        let tdStr = `
            <tr data-id="${item.id}">
                <td><input type="checkbox" name="checkone" ${item.state ? 'checked' : ''}></td>
                <td style="display: none;"></td>
                <td><img src="${item.picture}"></td>
                <td>${item.product}</td>
                <td>￥${item.price}</td>
                <td><input type="button" name="reduce" value="-" ${item.num == 0 ? 'disabled' : ''}><input type="text" name="num" value="${item.num}"><input type="button" name="plus" value="+"></td>
                <td>${priceAll}</td>
                <td><button type="button" name="del">删除</button></td>
            </tr>`
        str += tdStr
    });
    tableEle.innerHTML = str

    getTotalPrice()

}

// 加、减、删除、全选框
function reduceAndPlus() {
    tableEle.addEventListener('click', function (e) {
        e = e || window.event
        let target = e.target || e.srcElement

        let id = target.parentNode.parentNode.getAttribute('data-id')
        let product = productList.find(item => item.id == id)
        
        if (target.name == 'plus') {
            product.num++
            localStorage.setItem('PRODUCT', JSON.stringify(productList))
            loadList()
        }
        if (target.name == 'reduce') {
            product.num--
            localStorage.setItem('PRODUCT', JSON.stringify(productList))
            loadList()
        }
        if (target.name == 'del') {
            let index = productList.indexOf(product)
            productList.splice(index, 1)
            localStorage.setItem('PRODUCT', JSON.stringify(productList))
            loadList()
        }
        if (target.name == 'checkall') {
            checkallState = !checkallState
            productList.forEach(function (item) {
                item.state = checkallState

            })
            localStorage.setItem('PRODUCT', JSON.stringify(productList))
            loadList()
        }
        if (target.name == 'checkone') {
            product.state = !product.state
            localStorage.setItem('PRODUCT', JSON.stringify(productList))
            console.log(product.state);
            checkallState = productList.every(item => item.state == true)

            loadList()
        }
    })
}

function getTotalPrice() {
    let s = 0
    for (let i = 0; i < productList.length; i++) {
        s += productList[i].price * productList[i].num
    }
    document.querySelector('.total>span').innerHTML = `￥${s.toFixed(2)}`
}
loadList()
reduceAndPlus()